<template>
    <div id="echart-tu1" style="width: 100%;height: 800px;"></div>
</template>
<script setup>
import { onMounted } from 'vue'
import {sqlList} from '@/utils/graphChartData.js'
import GraphChart1 from '@/utils/graphChart1.js'

// onMounted(() => {
//     let dom = document.getElementById('echart-tu1')
//     console.log(dom, '==dom');
//     let mychart = echarts.init(dom)
//     mychart.setOption(option)

// })  
onMounted(() => {
    let chart = new GraphChart1({
        chartId:'echart-tu1',
        backgroundColor:"#000000",
        outerPadding: { //外间距 --图形容器与实例之间的间距
            left: 50, right: 50
        },
        innerPadding: { //内间距 -- 图形与图形容器之间的间距
            top: 100, bottom: 100
        },
        mainIconSize: 250,   //中心节点图标大小
        maxIconSize: 150,      //副节点最大图标大小
        distanceMinScale: 1,
        sizeMinScale: 0.8, //副节点图标最小比例
        nodeOpacity: 0, //节点背景颜色透明度
        mainLabel: {//中心节点文字配置
            show: true,
            color: "#ffffff",
            fontStyle: 'normal',
            fontSize: 36,
            fontWeight: 'bold',
            fontFamily: 'sans-serif',
        },
        otherLabel: {//副节点文字配置
            show: true,
            color: "#ffffff",
            fontStyle: 'normal',
            fontSize: 20,
            fontFamily: 'sans-serif',
        },
        lineStyle:{
            color: "#5096ff",//连接线颜色，多个以,分割， 单个颜色代码线条颜色为单色，多个则为渐变色，置空则使用echarts默认颜色
        },
        popupWidth: 500,        //弹框宽度
        popupHeight: 300,       //弹框高度
        popupOffset: [100, 0],    //弹框偏移量，默认为点击右侧节点弹框在中心节点左侧，点击左侧节点弹框在中心节点右侧，此配置在弹框位置基础上同向偏移
        legendOption: {     //图例相关配置
            bottom: 20,
            itemGap: 50,   //图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
            itemWidth: 20, //图例图标宽
            itemHeight: 20,//图例图标高
            icon: 'rect',  //图例图形  方型
            orient: 'horizontal',  //图例列表的布局朝向。
            textStyle: {
                color: "#fff",
                fontSize: 20
            }
        }
    })
    chart.setProps({
        data:sqlList
    })
})
</script>